<template>
  <div>
    <!-- 顶部app栏 -->
    <div class="app_header">
      <div class="app_left" @click="goHome">
        <img
          src="https://p1.toutiaoimg.com/medium/321c80005b6d5a51b0a8d"
          alt=""
        />
        <div class="title">
          <h3>小莱头条</h3>
          <p>看见更大的世界</p>
        </div>
      </div>
      <div class="app_right">打开App</div>
    </div>
    <!-- 内容 -->
    <div class="content" ref="content">
      <h2 class="h1">{{ articleList.title || articleList2.title }}</h2>
      <div class="users">
        <div class="user_main">
          <img :src="articleList.avatar || articleList2.avatar" alt="" />
          <div class="user_content">
            <h4>{{ articleList.nickname || articleList2.nickname }}</h4>
            <p>{{ time }}</p>
          </div>
        </div>
        <div class="guanzhu">关注</div>
      </div>
      <div class="content_main">
        <p>{{ articleList.content || articleList2.content }}</p>
        <img
          :src="item"
          v-for="item in articleList.imageSrc || articleList2.imageSrc"
          :key="item"
          alt=""
        />
      </div>
    </div>
    <van-divider
      :hairline="false"
      style="margin-bottom: 10px"
      ref="boder_comment"
    />
    <!-- 内容 -->
    <Comment :coment="comment"></Comment>
    <!-- end -->

    <van-popup v-model="popupShow" position="bottom">
      <div class="popup_content">
        <van-field
          v-model="content"
          rows="4"
          autosize
          type="textarea"
          maxlength="1000"
          :placeholder="contentPlaceholder"
          show-word-limit
          @keyup="keydownBtn"
        />
        <div style="width: 100%">
          <van-button size="large" type="primary" @click="addCount"
            >发布</van-button
          >
        </div>
      </div>
    </van-popup>

    <!-- 底部 -->
    <div class="footer">
      <div class="input">
        <i class="iconfont icon-shuru1"></i>
        <input
          type="text"
          name=""
          id=""
          placeholder="写评论..."
          @click="showReplyPopup"
        />
      </div>
      <div class="icon">
        <van-icon name="chat-o" :badge="comment" class="icons" />
        <i
          class="iconfont icon-shoucang1 icons"
          :class="{ fav: is_fav }"
          @click="addFav"
        ></i>
        <i
          class="iconfont icon-dianzan1 icons"
          :class="{ like: is_like }"
          @click="addlike"
        ></i>
        <van-icon name="share-o" class="icons" />
      </div>
    </div>
  </div>
</template>

<script>
import Comment from "./comment/Comment.vue";
import { mapState } from "vuex";
import formatTime from "@/utils/time";
import methods from "./addReplyCount";
import checklogin from '@/utils/checklogin'
export default {
  components: {
    Comment,
  },
  data() {
    return {
      content: "",
      popupShow: false,
      articleList2: {},
      contentPlaceholder: "留下你的精彩的神评再走吧！",
      comment_type: 0,
      is_fav: false,
      is_like: false,
    };
  },
  computed: {
    ...mapState(["articleList", "author_id", "replyList"]),
    time() {
      return formatTime(this.articleList2.time);
    },
    comment() {
      if (this.articleList2.comment == 0) {
        return "";
      }
      return this.articleList2.comment;
    },
  },
  methods: {
    ...methods,
    // 点击评论弹出输入框，编辑内容
    showReplyPopup() {
      this.popupShow = true;
    },
    //发布评论
    addCount() {
      checklogin()
      let { comment_type, content } = this;
      content = content.trim();
      if (content.length == 0) {
        this.$toast("请输入内容");

        return (this.content = "");
      }
      let val = {
        comment_type,
        content,
      };
      if (this.content.length == 0) {
        return;
      }
      this.$store.dispatch("getReplyAll", val);
      this.popupShow = false;
      this.content = "";
    },
    keydownBtn(e) {
      if (e.key == "Enter") {
        this.addCount();
      }
    },
    goHome() {
      this.$router.back()
      this.$store.commit("getReplyList3");
    },
  },
  created() {
    let articleList2 = JSON.parse(localStorage.getItem("articleList2"));
    this.articleList2 = articleList2;
    this.is_fav = articleList2.is_fav;
    this.is_like = articleList2.is_like;
    this.like = articleList2.like
  },



};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.popup_content {
  padding: 15px;
  font-size: 16px;
}
// <!-- 顶部app栏 -->
.app_header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 17px 10px 17px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  .app_left {
    display: flex;
    img {
      width: 40px;
      margin-right: 8px;
    }
    p {
      color: #333;
      font-size: 14px;
    }
  }
  .app_right {
    margin-top: 8px;
    background-color: #f04142;
    color: #fff;
    height: 30px;
    padding: 5px 10px;
    font-size: 14px;
  }
}
//内容
.content {
  margin-top: 80px;
  .h1 {
    margin: 22px 17px 20px 17px;
  }
  .users {
    display: flex;
    justify-content: space-between;
    padding: 0 17px 10px 17px;
    .user_main {
      display: flex;
      .user_content {
        h4 {
          font-weight: 500;
          font-size: 15px;
        }
        p {
          font-size: 12px;
        }
      }
      img {
        width: 34px;
        border-radius: 50% 50%;
        margin-right: 8px;
      }
    }
    .guanzhu {
      border: 1px solid #ccc;
      height: 30px;
      line-height: 30px;
      width: 50px;
      text-align: center;
      font-size: 14px;
      margin-top: 1px;
    }
  }
  .content_main {
    padding: 10px 17px 100px 17px;
    p {
      line-height: 2;
    }
    img {
      width: 100%;
      margin: 15px 0;
    }
  }
}
//底部
.footer {
  display: flex;
  padding: 10px 16px;
  position: fixed;
  bottom: -1px;
  left: 0;
  background-color: #fff;
  border-top: 1px solid rgb(244, 244, 244);
  .input {
    position: relative;
    flex: 4;
    display: flex;
    input {
      width: 100%;
      background-color: rgb(243, 243, 243);
      padding: 8px 0 8px 35px;
      border-radius: 15px;
      &::placeholder {
        font-size: 14px;
        font-family: "微软雅黑";
      }
    }
    .iconfont {
      position: absolute;
      top: 8px;
      left: 8px;
    }
  }
  .icon {
    flex: 6;
    text-align: center;
    height: 35px;
    line-height: 35px;
    .icons {
      margin: 0px 16px 10px 10px;
      font-size: 24px;
    }
    .icon-dianzan1 {
      font-size: 22px;
    }
    .fav {
      // color: #f04142;
      color: rgb(255, 213, 108);
    }
    .like {
      color: #f04142;
    }
  }
}
</style>